<template>
  <!-- 关注按钮 -->
  <van-button
    type="default"
    size="mini"
    round
    :loading="loading"
    v-if="isfolloed"
    @click="isfollowed"
    >已关注</van-button
  >
  <van-button
    type="warning"
    size="mini"
    round
    :loading="loading"
    v-else
    @click="isfollowed"
    >关注</van-button
  >
  <!-- /关注按钮 -->
</template>

<script>
import { followUserAPI, onfollowUserAPI } from "@/api/user.js";
export default {
  data() {
    return {
      loading: false,
    };
  },
  props: {
    isfolloed: {
      tpye: Boolean,
      require: true,
    },
    autid: {
      type: [Number, String, Object],
      require: true,
    },
  },
  methods: {
    // 关注/取消关注按钮
    async isfollowed() {
      // 取消关注
      this.loading = !this.loading;
      if (this.isfolloed) {
        try {
          await onfollowUserAPI(this.autid);
          this.$emit("changfollow", !this.isfolloed);
        } catch (err) {
          this.$toast("失败，请重试");
        }
      } else {
        // 关注
        try {
          await followUserAPI(this.autid);
          this.$emit("changfollow", !this.isfolloed);
        } catch (err) {
          let msg = "失败，请重试！";
          if (err.response && err.response.status == 400) {
            msg = "自己不能关注自己！";
          }
          this.$toast(msg);
        }
      }

      this.loading = !this.loading;
    },
  },
};
</script>

<style>
</style>